<template>
	<view class="hbh_container">
		<!-- 个人背景动态 -->
		<view class="hbh_userBox">
			<view class="hbh_userBanner">
				<view class="hbh_mark">
					<!-- 遮罩层 -->
				</view>
				<l-swiper :height="400" :indicatorDots="false" :banner="banner" v-model="curr"></l-swiper>
			</view>
			<view class="hbh_autor">
				<view class="hbh_image">
					<image :src="imageUrl" mode=""></image>
				</view>
				<view class="hbh_rightBox">
					<view class="hbh_login" v-if="!isLogin" @click="handleLogin">
						点击登录
					</view>
					<view class="hbh_name" v-if="isLogin">
						{{userInfo.user_name}}
					</view>
					<view class="hbh_phoneNumber">
						ID:{{isLogin?userInfo.user_id:'登录后获取'}}
					</view>
					<image v-if="isLogin" src="/static/image/homeImage/rightRocket.png" mode=""
						@click="handlePutInfo"></image>
				</view>
			</view>
		</view>
		<view class="hbh_ready">
			<view class="hbh_walletCard">
				<view class="hbh_wallentBox">
					<view class="hbh_walletChild">
						<image src="/static/image/meImage/wallet.png" mode=""></image>
						<view class="hbh_rightTxt">
							<text>可用虚拟书币</text>
							<text>100000.00</text>
						</view>
					</view>
					<view class="hbh_walletChild">
						<image src="/static/image/meImage/rocket.png" mode=""></image>
						<view class="hbh_rightTxt">
							<text>可用抵现红包</text>
							<text>100000.00</text>
						</view>
					</view>
				</view>
				<view class="hbh_task">
					<view class="hbh_taskLeft">
						<image src="/static/image/meImage/task.png" mode=""></image>
						<view class="hbh_taskTxt">
							<text>任务中心</text>
							<text>一站到底领现金</text>
						</view>
					</view>
					<view class="hbh_taskRight">
						<text>去做任务</text>
						<image src="/static/image/meright.webp" mode=""></image>
					</view>
				</view>
			</view>
			<view class="hbh_meList">
				<view class="hbh_meChild" v-for="(item,index) in list" :key="index" @click="handelClick(item)">
					<image :src="item.iconUrl" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入6位数邀请码" :value="value"
				placeholder="注意!不能填自己的,不能重复使用!" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import fileApi from "@/uni_modules/hbh-fileIo/js_sdk/index.js"
	import {
		getCountInfo,
		downLoadApp,
		checkApp
	} from "@/api/index.js"
	import {
		methods
	} from "uview-ui/libs/mixin/mixin";
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	const mp = uni.requireNativePlugin('uniMP');
	export default {
		name: "me",
		data() {
			return {
				value: "",
				title: 'uni小程序演示',
				appid: '__UNI__552F6CF',
				wgt: '/static/__UNI__552F6CF.wgt',
				imageUrl: "/static/image/homeImage/noLogin.png",
				list: [{
					text: "智初小交",
					iconUrl: "/static/image/history.png",
					pageUrl: '/pages/testWebView/testWebView?src=https://static-mp-8cdde33e-4fa8-49b0-822d-afd0aa963df6.next.bspapp.com/stu_side_h5/'
				}, {
					text: "离线阅读",
					iconUrl: "/static/image/bookList.png",
					pageUrl: '/pages/myNovelList/myNovelList'
				}, {
					text: "便捷登录",
					iconUrl: "/static/image/uqcode.png",
				}, {
					text: "去小程序",
					iconUrl: "/static/image/history.png",
				}, {
					text: "应用简介",
					iconUrl: "/static/image/meabout.png",
					pageUrl: '/pages/about/about'
				}, {
					text: "检查更新",
					iconUrl: "/static/image/update.png",
				}, {
					text: "更多设置",
					iconUrl: "/static/image/bianji.png",
					pageUrl: '/pages/moreSetting/moreSetting'
				}, {
					text: "填邀请码",
					iconUrl: "/static/image/bianji.png",
					pageUrl: '/pages/moreSetting/moreSetting'
				}],
				banner: [{
					src: "https://img1.baidu.com/it/u=1083834287,344119547&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=309",
				}, {
					src: "https://img2.baidu.com/it/u=2881245921,4175357114&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				}, {
					src: "https://img0.baidu.com/it/u=2174595347,3149152354&fm=253&fmt=auto&app=138&f=JPEG?w=1038&h=500",
				}, {
					src: "https://img2.baidu.com/it/u=2187984685,727239354&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				}],
				curr: 0,
				currentAPPVersion: '',
				currentAPPVersionCode: 100,
				userInfo: {},
				isLogin: false
			};
		},
		created() {
			if (!mp) {
				this.title = '当前环境不支持uni小程序';
			}
			plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				this.currentAPPVersion = widgetInfo.version
				this.currentAPPVersionCode = widgetInfo.versionCode - 0
				this.list[2].tip = '当前版本:' + this.currentAPPVersion + '(' + this.currentAPPVersionCode +
					')'
			})
			if (uni.getStorageSync("TOKEN")) {
				this.isLogin = true
				getCountInfo().then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data[0]
						this.imageUrl = res.data[0].head_imgurl ? res.data[0].head_imgurl : ''
					}
				}).catch((err) => {
					console.log(err)
					this.isLogin = false
				})
			} else {
				this.isLogin = false
			}


		},
		computed: {
			...mapState("me", ["update", "versionTip"])
		},
		methods: {
			dialogInputConfirm(val) {
				this.value = val.slice(0, 6)
				this.$refs.inputDialog.close()
			},
			handleLogin() {
				uni.removeStorageSync("TOKEN")
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			installMP() {
				mp.getUniMPVersion(this.appid, (ret) => {
					if (0 != ret.code) { //获取失败时安装应用
						this.doInstallMP();
					} else {
						// uni.showModal({
						//   title:'提示',
						//   content:'uni小程序已安装，是否覆盖？',
						//   success: res=>{
						//     res.confirm&&this.doInstallMP();
						//   }
						// });
						this.openMP()
					}
					console.log('getUniMPVersion: ' + JSON.stringify(ret));
				});
			},
			doInstallMP() {
				mp.installUniMP({
					appid: this.appid,
					wgtFile: this.wgt
				}, (r) => {
					if (0 == r.code) {
						uni.showToast({
							title: '安装成功'
						});
						this.openMP()
					} else {
						uni.showModal({
							title: '安装失败',
							content: JSON.stringify(r),
							showCancel: false
						});
					}
					console.log('installUniMP: ' + JSON.stringify(r));
				});
			},
			openMP() {
				mp.openUniMP({
					appid: this.appid
				}, (ret) => {
					if (0 != ret.code) {
						uni.showModal({
							title: '启动失败',
							content: JSON.stringify(ret),
							showCancel: false
						});
					}
					console.log('openUniMP: ' + JSON.stringify(ret));
				});
			},
			openMP2Path() {
				mp.openUniMP({
					appid: this.appid,
					path: 'pages/component/view/view',
				}, (ret) => {
					if (0 != ret.code) {
						uni.showModal({
							title: '启动失败',
							content: JSON.stringify(ret),
							showCancel: false
						});
					}
					console.log('openUniMP: ' + JSON.stringify(ret));
				});
			},
			openMP2Extra() {
				mp.openUniMP({
					appid: this.appid,
					extraData: {
						name: 'my name',
						id: 'my id'
					},
				}, (ret) => {
					if (0 != ret.code) {
						uni.showModal({
							title: '启动失败',
							content: JSON.stringify(ret),
							showCancel: false
						});
					}
					console.log('openUniMP: ' + JSON.stringify(ret));
				});
			},
			sendEvent() {
				mp.sendUniMPEvent(
					this.appid,
					'event', {
						'key': 'value',
						'name': 'data'
					},
					(ret) => {
						console.log('Host sendEvent: ' + JSON.stringify(ret));
					});
			},
			sendEventInterval() {
				setInterval(this.sendEvent, 5000);
			},
			...mapMutations(["me/changeState", "me/changeSmallUpdate", "me/changeUpdateVal"]),
			handlePutInfo() {
				this.userInfo.head_imgurl = encodeURIComponent(this.userInfo.head_imgurl)
				uni.navigateTo({
					url: "/pages/setting/setting?userInfo=" + JSON.stringify(this.userInfo)
				})
			},
			handelClick(item) {
				switch (item.text) {
					case '检查更新':
						this._checkApp()

						// fileApi.createTask("https://hbhfiles.oss-cn-shenzhen.aliyuncs.com/%E5%A4%A7%E6%B1%9F%E6%B9%96.txt",'abc').then((res)=>{
						// 	console.log(res)
						// }).catch((err)=>{
						// 	console.log(err)
						// })
						break;
					case '便捷登录':
						uni.navigateTo({
							url: `/pages/barcode/barcode?userId=${this.userInfo.user_id}`
						})
						break;
					case '去小程序':
						this.installMP()
						break;
					case '填邀请码':
						this.$refs.inputDialog.open()
						break;
					case '更多设置':
					case '智初小交':
					case '离线阅读':
					case '应用简介':
						uni.navigateTo({
							url: item.pageUrl
						})
						break;
					default:
						uni.showToast({
							icon: "none",
							title: "未知操作"
						})
				}
			},
			//检查更新
			_checkApp() {
				checkApp({
					version_name: this.currentAPPVersion,
					version_number: this.currentAPPVersionCode
				}).then((res) => {
					// console.log(res)
					if (res.code == 200 && res.data) {
						if (res.data == '1') {
							this["me/changeUpdateVal"](false)
							uni.showToast({
								icon: "none",
								title: "您的版本已是最新版本!"
							})
						} else if (res.data == '2') {
							this["me/changeState"](true)
							this["me/changeSmallUpdate"](true)
							//wgt包更新
						} else if (res.data == '3') {
							this["me/changeState"](true)
							this["me/changeSmallUpdate"](false)
							console.log("大更")
						}
					} else {
						uni.showToast({
							icon: "none",
							title: "您的版本已是最新版本!"
						})
					}
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hbh_container {
		// padding-top: var(--status-bar-height);
		box-sizing: border-box;
		height:100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FFE8C2 0%, #f5f5f5 100%);
		position: relative;

		.hbh_userBox {
			height: 400rpx;
			width: 100vw;
			position: relative;

			.hbh_userBanner {
				width: 100%;
				height: 400rpx;
				position: relative;

				.hbh_mark {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 400rpx;
					background-color: rgba(0, 0, 0, .3);
				}
			}

			.hbh_autor {
				position: absolute;
				top: calc(50% - 90rpx);
				left: 0rpx;
				z-index: 3;
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				height: 180rpx;
				display: flex;
				align-items: center;
				border-radius: 5rpx;
				color: #fff;

				.hbh_image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.hbh_rightBox {
					flex: 1;
					position: relative;


					image {
						position: absolute;
						width: 50rpx;
						height: 50rpx;
						top: calc(50% - 25rpx);
						right: 0;
					}

					.hbh_login {
						height: 70rpx;
						background-color: #FF6E6E;
						line-height: 70rpx;
						text-align: center;
						width: 240rpx;
						border-radius: 35rpx;

					}

					.hbh_name {
						height: 70rpx;
						line-height: 70rpx;
					}

					.hbh_phoneNumber {
						margin-top: 10rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 28rpx;
					}
				}
			}

		}
	}

	.hbh_ready {
		width: 100%;
		height: calc(100% - 400rpx);
		overflow-y: auto;
		display: flex;
		flex-direction: column;

		.hbh_walletCard {
			padding: 0 40rpx;
			box-sizing: border-box;
			color: #000;
			// background-color: #fff;

			.hbh_task {
				margin: 30rpx 0rpx;
				height: 130rpx;
				background-color: #fdf0e7;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 65rpx;
				padding: 0 50rpx;
				box-sizing: border-box;
				color: #e2c3a9;

				.hbh_taskLeft {
					display: flex;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}

					.hbh_taskTxt {
						display: flex;
						flex-direction: column;

						text {
							font-size: 20rpx;
						}

						text:first-child {
							font-size: 30rpx;
							margin-bottom: 10rpx;
						}
					}
				}

				.hbh_taskRight {
					display: flex;
					align-items: center;

					text {
						margin-right: 24rpx;
						font-size: 24rpx;
					}

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.hbh_wallentBox {
				display: flex;
				justify-content: space-around;

				.hbh_walletChild {
					width: 320rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 62rpx;
						height: 62rpx;
						margin-right: 10rpx;
					}

					.hbh_rightTxt {
						display: flex;
						flex-direction: column;

						text {
							font-size: 26rpx;
							color: #ccc;
							height: 30rpx;
							line-height: 30rpx;
							text-align-last: center;
						}

						text:last-child {
							margin-top: 10rpx;
							font-size: 38rpx;
							color: #000;
							text-align-last: center;
						}
					}
				}
			}

		}

		.hbh_meList {
			color: #fff;
			margin-top: 130rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			.hbh_meChild {
				width: 300rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 5rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

				text {
					font-size: 30rpx;
					font-weight: 500;
					color: #000;
				}

			}
		}
	}
</style>